<template>
    <div class="land-info">
        <div class="mid-width">
            <el-row>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/index' }">&nbsp;&nbsp;<i class="el-icon-house"></i>&nbsp;&nbsp;首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">{{this.$route.query.typeId | nameTit}}</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row>
                <ul class="form-map">
                    <li>
                        <label>地区：</label>
                        <el-select v-model="areaTarget" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in area"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </li>

                    <li>
                        <label>用途：</label>
                        <el-select v-model="purTarget" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in purpose"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </li>

                    <li>
                        <label>流转：</label>
                        <el-select v-model="tranTarget" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in transfer"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </li>

                    <li>
                        <el-button type="info" icon="el-icon-search" plain @click="searchList">搜索</el-button>
                    </li>

                </ul>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row>
                <ul class="entry-new" v-loading="loading">
                    <li>
                        <el-row :gutter="20">
                            <el-col :span="6">&nbsp;&nbsp;<i class="el-icon-location-information"></i>&nbsp;&nbsp;<strong>土地名称</strong></el-col>
                            <el-col :span="6">&nbsp;&nbsp;<i class="el-icon-office-building "></i>&nbsp;&nbsp;<strong>土地面积</strong></el-col>
                            <el-col :span="6">&nbsp;&nbsp;<i class="el-icon-position"></i>&nbsp;&nbsp;<strong>所属区域</strong></el-col>
                            <el-col :span="6">&nbsp;&nbsp;<i class="el-icon-time"></i>&nbsp;&nbsp;<strong>发布时间</strong></el-col>
                        </el-row>
                    </li>
                    <li v-for="(item, index) in tableData" :key="index" v-if="index<=9">
                        <router-link tag="a" :to="{path:'/landDetail/',query:{'typeId':4, 'landId':item.landId}}" >
                            <el-row :gutter="20">
                                <el-col :span="6">&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title | fontSize}}</el-col>
                                <el-col :span="6">{{item.acreage}}</el-col>
                                <el-col :span="6">{{item.area}}</el-col>
                                <el-col :span="6">{{item.createDate  | formatDate}}</el-col>
                            </el-row>
                        </router-link>
                    </li>
                </ul>
            </el-row>

            <el-row>
                <el-pagination
                        @current-change="handleCurrentChange"
                        background
                        :current-page="curPage"
                        layout="prev, pager, next"
                        :total="pageTotal">
                </el-pagination>
            </el-row>

        </div>
    </div>
</template>

<script>
    import {apiData} from '../interface/api';
    import {tool} from '../tool/index';
    import ElRow from "element-ui/packages/row/src/row";
    export default {
        components: {ElRow},
        name: "land-info",
        data(){
            return {
                tableData: [],
                pageTotal:null,
                curPage:1,
                pageSize:10,
                typeId:this.$route.query.typeId,
                area:[],
                purpose:[],
                transfer:[],
                areaTarget:"",
                purTarget:"",
                tranTarget:"",
                loading: true
            }
        },
        methods:{
            async newList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code===200){
                    if(res.data.list){
                        this.loading = false;
                        this.tableData = res.data.list
                        this.pageTotal = res.data.totals
                    } else {
                        this.loading = true;
                        this.$message({
                            message: '数据加载失败,请刷新页面',
                            type: 'warning'
                        });
                    }

                }
            },
            async areaListForm(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                //console.log(res)
                this.area = res.data

            },
            async purposeListForm(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                // console.log(res)
                this.purpose = res.data

            },
            async transferModeList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                // console.log(res)
                this.transfer = res.data

            },
            handleCurrentChange(Page){
                this.curPage = Page;
                //console.log(this.curPage)  //点击第几页
                this.newList('post',`/web/landList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
            },
            searchList(){
                this.newList('post', `/web/landList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {
                    areaId:this.areaTarget,
                    purposeId:this.purTarget,
                    transferTypeId:this.tranTarget
                })
            }
        },
        mounted() {
            this.newList('post', `/web/landList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
            this.areaListForm('get', '/web/areaList', {})
            this.purposeListForm('get', '/web/purposeList', {})
            this.transferModeList('get', '/web/transferModeList', {})
        },
        watch:{
            "$route"(val,old){
                if(old!==val){
                    this.typeId = val.query.typeId;
                    this.newList('post', `/web/newsList?pageNum=${this.curPage}&pageSize=${this.pageSize}`, {typeId:this.typeId})
                }

            }
        },
        filters:{
            formatDate(val) {
                const value=new Date(val);
                const year=value.getFullYear();
                const month= tool.padDate(value.getMonth()+1);
                const day = tool.padDate(value.getDate());
                const hour = tool.padDate(value.getHours());
                const minutes = tool.padDate(value.getMinutes());
                const seconds = tool.padDate(value.getSeconds());
                return `${year}-${month}-${day}`;
            },
            nameTit(id){
                let pageTit =4;
                switch (id){
                    case 1:
                        pageTit = "政策法规";
                        break;
                    case 2:
                        pageTit = "通知公告";
                        break;
                    case 3:
                        pageTit = "文件下载";
                        break;
                    case 4:
                        pageTit = "土地信息";
                        break;
                }
                return pageTit
            },
            fontSize(title){
                if(title.length>=15){
                    return `${title.slice(0, 15)}...`
                } else {
                    return title
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .land-info{
        .mid-width{
            .entry-new{
                border-radius: 5px;
                border: 1px solid #eee;
                padding: 30px;
                height: 480px;
                li{
                    line-height: 40px;
                    border-bottom: 1px dashed #eee;
                    span{

                    }
                    a{
                        text-decoration: none;
                        color: black;
                        &:hover{
                            color: #009688;
                        }
                    }
                }
            }
            .form-map{
                display: flex;
                flex-wrap: wrap;
                flex-direction: column-reverse;
                height: 60px;
                li{
                    line-height: 60px;
                }
            }
            .el-pagination{
                margin-top: 20px;
            }
        }
    }
</style>